<template>
  <div class="index-content" :style="{ height: `${viewheight.GetViewHeight(165)}px` }">
    <PostCardComponenent @load-data="loadData" :postpage="postpage" :loading="loading" :disabled="disabled">
      <template #dropslot="slotProp">
        <el-dropdown-menu>
          <el-dropdown-item @click="like(slotProp.itemValue)">
            <IconPark v-if="slotProp.itemValue.likes" :icon="ThumbsUp" :theme="'filled'" :stroke-width="3" :size="16"
              :fill="'#2a97d1'" style="display: flex;" />
            <IconPark v-else :icon="ThumbsUp" :stroke-width="3" :size="16" style="display: flex;" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </PostCardComponenent>
  </div>
</template>

<script setup lang="ts">
import { useViewHeightStore } from "@/store/viewheight";
import PostCardComponenent from "@components/PostCardComponent/PostCardComponenent.vue";
import { ThumbsUp } from "@icon-park/vue-next";
import { Tpost } from "@/models/post";
import { post_like, post_cancel } from "@/api/postapi";
import { useUserInfo } from "@store/userinfo";
import { storeToRefs } from "pinia";

const { userinfo } = storeToRefs(useUserInfo());
const viewheight = useViewHeightStore();
const emit = defineEmits(["loadData"]);

const { postpage, loading, disabled } = defineProps<{
  postpage: Array<Tpost>,
  loading: boolean,
  disabled: boolean
}>()

const like = async (item: Tpost) => {
  if (item.likes) {
    const res = await post_cancel({ id: item.id, userId: userinfo.value.id });
    if (res.code === 200) {
      item.likes = 0;
      ElMessage.success("取消点赞成功!");
    }
  } else {
    const res = await post_like({ id: item.id, userId: userinfo.value.id });
    if (res.code === 200) {
      item.likes = 1;
      ElMessage.success("帖子点赞成功！");
    }
  }
}

const loadData = () => {
  emit("loadData");
}

</script>

<style scoped lang="less">
.index-content {
  width: 84%;

}
</style>
